<template>
    <div class="ai-preference">
      <div class="head">
        <div class="icon"></div>
        <div class="title">AI 偏好设置</div>
      </div>
      <div class="content">
        <div class="content-item">
           <div class="title2">AI辅助方式</div>
           <div class="details">
              <label :class="{ 'button1': form.assistMode === 'intelligent', 'button2': form.assistMode!== 'intelligent' }">
                  <input type="radio" name="assistMode" v-model="form.assistMode" value="intelligent" hidden>
                  智能询问
              </label>
              <label :class="{ 'button1': form.assistMode === 'manual', 'button2': form.assistMode!== 'manual' }">
                  <input type="radio" name="assistMode" v-model="form.assistMode" value="manual" hidden>
                  手动查询
              </label>
              <div class="prompt">“AI 可实时回答备课问题，提供教学建议，帮助优化课程设计”</div>
           </div>
        </div>
        <div class="content-item">
           <div class="title3">AI个性化备课风格</div>
           <div class="details">
              <div class="item">
                <input type="radio" 
                name="style"
                :checked="form.style === 'high'"
                @change="toggleStyle('high')"
                :class="{ 'button3': true, 'button3-active': form.style === 'high' }"/>
                <div class="text">高</div>
              </div>
              <div class="item">
                <input type="radio" 
                name="style"
                :checked="form.style === 'mid'"
                @change="toggleStyle('mid')"
                :class="{ 'button4': true, 'button4-active': form.style === 'mid' }"/>
                <div class="text">中</div>
              </div>
              <div class="item">
                <input type="radio" 
                name="style"
                :checked="form.style === 'low'"
                @change="toggleStyle('low')"
                :class="{ 'button5':true,'button5-active':form.style === 'low' }"/>
                <div class="text">低</div>
              </div>
              <div class="prompt">“开启智能询问模式，AI备课助手将在您备课时，提供一些辅助建议”</div>
           </div>
        </div>
        <div class="content-item">
           <div class="title4">AI备课内容深度</div>
           <div class="details">
              <div class="item">
                <input type="radio" 
                name="style"
                :checked="form.deep === 'deep'"
                @change="toggleDeep('deep')"
                :class="{ 'button3': true, 'button3-active': form.deep === 'deep' }"/>
                <div class="text">深</div>
              </div>
              <div class="item">
                <input type="radio" 
                name="style"
                :checked="form.deep === 'mid'"
                @change="toggleDeep('mid')"
                :class="{ 'button4': true, 'button4-active': form.deep === 'mid' }"/>
                <div class="text">中</div>
              </div>
              <div class="item">
                <input type="radio" 
                name="style"
                :checked="form.deep === 'shallow'"
                @change="toggleDeep('low')"
                :class="{ 'button5':true,'button5-active':form.deep === 'low' }"/>
                <div class="text">浅</div>
              </div>
              <div class="prompt">“AI 生成完整教学方案，包含详细的教学内容、案例、互动问题、练习题等，适合需要完整 AI 备课方案的教师”</div>
           </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const form = ref({
    assistMode: 'intelligent',
    style: 'high',
    deep: 'deep',
})
const toggleStyle = (value: string) => {
    form.value.style = form.value.style === value? '' : value;
};

const toggleDeep = (value: string) => {
    form.value.deep = form.value.deep === value? '' : value;
};
</script>

<style scoped lang="less">
@import url('@/views/ai-preference/index.less');
</style>